import React, { useState, useEffect, useRef, useCallback } from 'react'
import { connect } from 'react-redux'
import { Container } from "./style";
import { 
    changeEnterLoading,
    getSingerInfo 
} from "./store/actionCreators";
import { CSSTransition } from "react-transition-group";
import { useNavigate } from 'react-router-dom'

function Singers(props) {
    const navigate = useNavigate();
    const { getSingerDataDispatch } = props
    const [showStatus, setShowStatus] = useState(true);

    useEffect(() => {
        getSingerDataDispatch();
    }, [])

    return (
        <CSSTransition 
            in={showStatus}
            timeout={300}
            classNames="fly"
            appear={true}
            unmountOnExit
            onExited={() => navigate(-1)}
        >

        </CSSTransition>
    )
}
const mapStateToProps = (state) => {
    return {
        artist:state.singerInfo.artist,
        songs:state.singerInfo.songs,
        enterLoading:state.singerInfo.enterLoading,
        songsCount:state.player.playList.length
    }
}
// 状态改变的流程 
// 数据状态变得万无一失
const mapDispatchToProps = (dispatch) => {
    return {
        getSingerDataDispatch(id) {
            dispatch(changeEnterLoading(true));
            dispatch(getSingerInfo(id));
        }
    }
}
export default connect(
    mapStateToProps, 
    mapDispatchToProps
)(React.memo(Singers))
